<template>
    <div class="client_list_container">
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @selection-change="onSelectionChange"
            @select-all="onSelectAll">
            <template #headerOperate>
                <el-button v-auth="'ADD_LABEL_GROUP'" type="primary" @click="openCreateTag">新建标签组</el-button>
            </template>
        </ZwTable>
        <ZWSelectTag ref="searchSelectRef" :all-tags="AllTags" @submit="getTags"></ZWSelectTag>
        <ZWDeletdialog ref="DeletdialogRef" @submit="batchRemove" @cancel="batchCancel"></ZWDeletdialog>
        <ZWCreateTag ref="createTag" :all-tags="AllTags" @submit="resetForm" />
    </div>
</template>

<script setup lang="tsx">
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import ZWGroup from '@/components/ZWGroup.vue';
import ZWCreateTag from '../components/ZWCreateTag.vue';
import ZWSelectTag from '../components/ZWSelectTag.vue';
import useClipboard from 'vue-clipboard3';
import { getSetionId } from '@/utils/utils';
import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { activityList, changeStatus, delActivity, download } from '@/api/smartMarketing/luckyDraw';
import { ref, reactive, computed, nextTick } from 'vue';
import { useStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { deepCopy } from '@/utils/helper';
import { StatusColor, DOWLOAD_FILE } from '@/utils/smartMarketing';
import { getTagsList, getCusTags, delTagGroup } from '@/api/customerLabel';
const DeletdialogRef: any = ref(null);
// 选择标签options
const createTag: any = ref(null);
const searchSelectRef: any = ref(null);
const delData: any = ref(null); // 删除的数据
const checkList: any = ref([]);
const defaultParams = {
    keyword: '',
    type_list: []
};

const tableRef: any = ref<HTMLElement | null>(null);
// 获取表格高度
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const AllTags = ref([]);
const getTagsListFun = () => {
    getTagsList().then((r: any) => {
        AllTags.value = r;
    });
};
getTagsListFun();
// 打开选择标签
const selecTag = () => {
    searchSelectRef.value.showCreatTag = true;
    searchSelectRef.value.appDialog.visible = true;
    searchSelectRef.value.selectTags = AllTags.value;
};
const searchOption = computed(() => {
    return [
        {
            label: '标签组类别',
            name: 'type_list',
            value: [],
            type: 'select',
            placeholder: '全部',
            multiple: true,
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    const params = '';
                    getTagsList(params).then((res: any) => {
                        const targetArr: any = [];
                        res.forEach((item: any) => {
                            targetArr.push(item);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '标签搜索',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '输入标签组、标签名进行查找'
        }
    ];
});
const search = (v: any) => {
    state.searchParams = {
        ...deepCopy(defaultParams),
        ...v
    };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};

// 表格
const tableOption = [
    {
        prop: 'group_name',
        label: '标签组',
        minWidth: 180
    },
    {
        prop: 'tags',
        label: '标签',
        minWidth: 400,
        isTag: true
    },
    {
        prop: 'group_type_value',
        label: '标签组类别',
        minWidth: 180
    },
    {
        prop: 'created_at',
        label: '创建时间',
        minWidth: 240
    },
    {
        prop: 'operate',
        label: '操作',
        width: 200,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '编辑',
                authCode: 'EDIT',
                click(row: any) {
                    edit(row);
                }
            },
            {
                name: '删除',
                authCode: 'DEL',
                click(row: any) {
                    del(row);
                }
            }
        ]
    }
];
const fetchApi = () => {
    // 获取文件列表
    getTableH();
    return getCusTags;
};

// 选中表格 checkbox
const onSelect = (selection, row) => {
    if (selection.constructor === Array) checkList.value = selection.map(v => v.id);
};
// 选择项变更
const onSelectionChange = selection => {};
// 全选
const onSelectAll = selection => {
    checkList.value = selection.map(v => v.id);
};
// 刷新表格
const reloadTable = () => {
    tableRef.value.reload();
};
// 导出表格数据
const exportTableData = () => {};
// 编辑
const edit = (data: any) => {
    createTag.value.echo(data);
    createTag.value.appDialog.visible = true;
    createTag.value.appDialog.title = '编辑客户群标签组';
};
// 删除
const del = (val: any) => {
    delData.value = val.group_id;
    DeletdialogRef.value.appDialog.visible = true;
    DeletdialogRef.value.content = `<div>删除后，已添加到客户群信息的标签也一起删除!</div>`;
    DeletdialogRef.value.appDialog.title = `删除标签组【${val.group_type_value}】`;
};
// 删除的二次确认
const batchRemove = () => {
    delTagGroup({
        group_id: delData.value
    })
        .then((data: any) => {
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            ElMessage.success('删除成功');
        })
        .catch((e: any) => {
            ElMessage.error('删除失败');
        });
};
const openCreateTag = () => {
    createTag.value.appDialog.visible = true;
    createTag.value.appDialog.title = '新建客户群标签组';
};
const resetForm = () => {
    tableRef.value.reload();
};
// 获取标签
const getTags = (data: any) => {
    alert(data);
    // ruleForm.tag_list = getSetionId('id', data)
};
</script>

<style lang="scss" scoped>
.client_list_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>
